// nodejs 处理路径的内置模块
// __dirname 当前绝对路径
// D:\Code\H5\3\vue\webpack-demo/dist

/**
 * 1.定义目录结构 - dist
 *               - src
 *                  - views
 *               main.js
 * 2.安装webpack，webpack-cli@4.9.2
 * 3.安装需要使用的loader vue-loader@15.9.8
 * 4.配置 webpack.config.js 文件（如下）
 * 5.注意正则匹配规则不加 引号
 * 6.样式文件的loader配置，需要有style、css、less三者
 */

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  // 入口
  entry: './src/js/index.js',
  // 出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  // loader
  module: {
    rules: [
      // 处理所有 .vue 后缀的文件，后面配置其他 loader，比如 css、js
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  },
  // 插件
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}